<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /* 对于块级元素来说，如果没有设置宽度，宽度默认是父元素的100% */
            /* 对于块级元素来说，如果没有设置高度，高度靠内容撑起来 */
            background-color: gold;

            /* 对于块级元素来说，可以设置宽度 */
             /* 对于行内块级元素，是可以设置宽高 */
            /* width: 300px; */
            height: 300px;

            /* width是有默认值，默认值是auto */
            /* width:auto;  表示宽度交给浏览器去计算，去决定 */
        }
        span{
            /* 行内级元素，宽高都是靠内容撑起来 */
            background-color: skyblue;

            /* display给一个元素做变性手术 */
            /* 专业：设置一个元素的显示模式 */
            /* inline-block 行内块 */
            display: inline-block;

            /* 行内级元素，不能设置宽度 */
            /* 如果改变了行内级元素的显示模式，改成block，或改为inline-block，就可以设置宽高 */
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>我是一个孤独的DIV</div>
    <hr>
    <span>我是一个SPAN</span>
</body>
</html>